<!--
  -
  - +----------------------------------------------------------------------
  - | 友得云客  - 开启房产营销新纪元
  - +----------------------------------------------------------------------
  - | Copyright (c) 2019~2024 优得（西安）信息科技有限公司版权所有
  - +----------------------------------------------------------------------
  - | Licensed 友得云客不是自有软件 未经允许不可移除相关版权
  - +----------------------------------------------------------------------
  - | Author: www.youdeyunke.com
  - +----------------------------------------------------------------------
  -
  -->

<!--
+----------------------------------------------------------------------
| 友得云客  - 开启房产营销新纪元
+----------------------------------------------------------------------
| Copyright (c) 2019~2023 优得（西安）信息科技有限公司版权所有
+----------------------------------------------------------------------
| Licensed 友得云客不是自由软件 未经允许不可移除相关版权
+----------------------------------------------------------------------
| Author: www.youdeyunke.com
+----------------------------------------------------------------------
-->
<template>
  <div class="app-container">
    <new-form ref="newform" @create="createSuccessHandle" />
    <qr-preview ref="qr" category="auctionhouse" @refresh="loadData" />
    <CloseDialog ref="close" @refresh="loadData" />

    <ud-card>
      <div class="myheader">
        <div class="part-left">
          <post-filter @change="filterChangeHandle" />
        </div>

        <div class="part-right">
          <template v-if="selectionItems.length > 0">
            <div v-if="btns.delete_auction_house" class="block">
              <el-button
                :disabled="selectionItems.length == 0"
                size="small"
                type="danger"
                plain
                @click="patchActionHandle('delete')"
              >{{ btns.delete_auction_house.label || "删除" }}所选
              </el-button>
            </div>
          </template>

          <div class="block">
            <el-button
              :disabled="loading"
              icon="el-icon-refresh"
              size="small"
              type="default"
              plain
              @click="loadData"
            >刷新
            </el-button>
          </div>

          <!-- <div class="block" v-if="btns.create_house">
            <ExcelUploaderBtn @success="uploadSuccess" btnText="导入法拍房" importType="法拍房" api="/api/admin6/houses/import"
              tpl="house-tpl-v1.xlsx"></ExcelUploaderBtn>
          </div> -->

          <div class="block">
            <el-button
              v-if="btns.create_auction_house"
              size="small"
              type="primary"
              icon="el-icon-plus"
              @click="newFormOpenHandle"
            >新建法拍房
            </el-button>
          </div>
        </div>
      </div>

      <el-divider />
      <el-table
        v-loading="loading"
        style="width: 100%"
        :data="items"
        :row-class-name="tableRowClassName"
        size="small"
        element-loading-text="正在加载房源列表"
        fit
        highlight-current-row
        @selection-change="handleSelectionChange"
        @sort-change="sortChangeHandle"
      >

        <el-table-column prop="编号" label="选择" width="50" type="selection" />
        <el-table-column sortable="custom" prop="id" label="ID" width="80" />

        <el-table-column label="标的物">
          <template slot-scope="scope">
            <div>
              <el-tag
                v-if="!scope.row.is_public"
                size="mini"
                type="warn"
                plain
              >未上架
              </el-tag>
              <el-tag
                v-if="scope.row.is_top"
                type="danger"
                size="mini"
                plain
              >置顶
              </el-tag>
              {{ scope.row.title }}
            </div>
          </template>
        </el-table-column>

        <el-table-column label="地址" prop="address">
          <template slot-scope="scope">
            <ud-tooltip :text="scope.row.address" />
          </template>
        </el-table-column>

        <el-table-column label="面积" prop="area" width="100" />

        <el-table-column label="状态" prop="status" width="100" />

        <el-table-column prop="fav_nums" label="收藏" width="80" />
        <el-table-column sortable="custom" prop="view_nums" label="浏览" width="80" />

        <el-table-column label="操作" width="300">
          <template slot-scope="scope">
            <el-link icon="el-icon-mobile-phone" type="primary" size="mini" @click="qrHandle(scope.row)">预览</el-link>
            <el-link
              v-if="btns.public_auction_house"
              :disabled="publicLoading"
              :type="scope.row.is_public ? 'warning' : 'primary'"
              size="mini"
              @click="publicHandle(scope.row)"
            >{{
              scope.row.is_public == true ? "下架" : "上架"
            }}
            </el-link>
            <el-link
              v-if="btns.top_auction_house"
              :disabled="topLoading"
              :type="scope.row.is_top ? 'warning' : 'primary'"
              @click="topHandle(scope.row, !scope.row.is_top)"
            >
              {{
                scope.row.is_top == true ? "取消置顶" : "置顶"
              }}
            </el-link>
            <el-link icon="el-icon-edit" type="primary" size="mini" @click="formOpenHandle(scope.row)">管理</el-link>
            <el-link icon="el-icon-close" type="primary" size="mini" @click="closeHandle(scope.row)">结束</el-link>
            <el-link v-if="btns.delete_auction_house" type="danger" @click="deleteHandle(scope.row.id)">删除</el-link>
          </template>
        </el-table-column>
      </el-table>

      <div class="pager">
        <el-pagination
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          :page-sizes="[10, 20, 50, 100]"
          hide-on-single-page
          background
          :page-size="per_page"
          @current-change="updateCurrentPage"
          @size-change="updatePageSize"
        />
      </div>
    </ud-card>
  </div>
</template>

<style lang="scss" scoped>
.top-row {
  background: #ff0000;
}

.app-container {
  .myheader {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .part-right {
      display: flex;
      justify-content: flex-end;
      align-items: center;

      .block {
        margin-left: 10px;
      }
    }

    .part-left {
      display: flex;
      justify-content: flex-start;
      align-items: center;

      .block {
        margin-right: 10px;
      }
    }
  }
}
</style>

<script>
import {
  deleteAuctionHouse,
  getAuctionHouseList,
  updateAuctionHousePublic,
  updateAuctionHouseTop
} from '@/api/auctionhouse'
import { mapGetters } from 'vuex'
import NewForm from './NewForm'
import UdCard from '@/components/UdCard'
import TagItem from '@/components/TagItem'
import ExcelUploaderBtn from '@/components/ExcelUploaderBtn.vue'
import QrPreview from '@/components/QrPriview.vue'
import PostFilter from './PostFilter/Index'
import CloseDialog from './CloseDialog.vue'

export default {
  name: 'Old',
  components: {
    TagItem,
    NewForm,
    UdCard,
    QrPreview,
    PostFilter,
    ExcelUploaderBtn,
    CloseDialog
  },
  computed: {
    ...mapGetters(['user'])
  },

  props: {
    btns: { type: Object, default: null }
  },

  data: function() {
    return {
      currentRemarkPopId: null,
      formDataId: null,
      items: [],
      selectionItems: [],
      loading: true,
      downloadLoading: false,
      publicLoading: false,
      topLoading: false,
      per_page: 20,
      total: 0,
      order: 'id desc',
      current_page: 1,
      filter: {}
    }
  },

  watch: {
    order: function(v) {
      this.loadData()
    },
    current_page: function(newVal, oldVal) {
      this.loadData()
    },
    per_page: function(newVal, oldVal) {
      this.loadData()
    }
  },

  created() {
    this.loadData()
  },

  methods: {

    sortChangeHandle: function(e) {
      var v = e.prop
      v = v.replace('_pretty', '')
      if (e.order == 'descending') {
        v = v + ' desc'
      } else {
        v = v + ' asc'
      }
      this.order = v
    },

    uploadSuccess() {
      this.loadData()
    },

    qrHandle: function(item) {
      this.$refs.qr.openDialog(item)
    },

    closeHandle: function(item) {
      this.$refs.close.openDialog(item)
    },

    filterChangeHandle: function(filter) {
      // 重新搜索
      console.log('filter is', filter)
      this.filter = filter
      this.current_page = 1
      this.loadData()
    },

    patchActionHandle: function(action) {
      var _this = this
      if (action == 'delete') {
        this.$confirm('确定要删除当前所选房源吗？').then(() => {
          _this.loading = true
          _this.selectionItems.forEach((p, i) => {
            deleteAuctionHouse(p.id).then((resp) => {
              if (i == _this.selectionItems.length - 1) {
                _this.loadData()
                _this.$message.success('已删除')
              }
            })
          })
        })
        return
      }
    },

    handleSelectionChange: function(items) {
      this.selectionItems = items
    },

    tableRowClassName({ row, rowIndex }) {
      if (row.is_top === true) {
        return 'top-row'
      }
      return ''
    },

    publicHandle: function(item) {
      this.publicLoading = true
      var v = !item.is_public
      updateAuctionHousePublic(item.id, v).then((resp) => {
        this.publicLoading = false
        if (resp.status == 0) {
          item.is_public = v
        }
      })
    },

    topHandle: function(item) {
      this.topLoading = true
      var v = !item.is_top
      updateAuctionHouseTop(item.id, v).then((resp) => {
        this.topLoading = false
        if (resp.status == 0) {
          item.is_top = v
        }
      })
    },

    deleteHandle: function(pid) {
      this.$confirm('房源将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定删除',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this._deleteHandle(pid)
      })
    },

    _deleteHandle(pid) {
      deleteAuctionHouse(pid).then((resp) => {
        if (resp.status == 0) {
          this.loadData()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        }
      })
    },

    newFormOpenHandle: function(house) {
      this.$refs.newform.openDialog()
    },

    createSuccessHandle: function(house) {
      this.$refs.newform.closeDialog()
      this.formDataId = house.id
      this.$message.success('创建项目成，请完善更多项目信息')
      this.loadData()

      console.log(house.url)
      this.$router.push({ path: house.url })
    },

    formOpenHandle: function(house) {
      console.log(house.url)
      this.$router.push({ path: house.url })
    },

    updateCurrentPage: function(page) {
      this.current_page = page
    },

    updatePageSize: function(size) {
      this.per_page = size || 10
    },

    loadData: function() {
      this.loading = true
      var _this = this
      var query = {
        page: _this.current_page,
        per_page: _this.per_page,
        order: _this.order
      }
      var filter = this.filter
      Object.keys(filter).forEach((key, i) => {
        query[key] = filter[key]
      })

      getAuctionHouseList(query).then((resp) => {
        _this.items = resp.data.result

        _this.total = resp.data.page.total_items
        _this.loading = false
      })
    }
  }
}
</script>
